<!-- 兑换详情 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="兑换详情" :borderBottom="false"></u-navbar>
		<view class="top flex_align">
			<u-icon name="clock" size="36" color="#FFFFFF"></u-icon>
			<view v-if="detail.status==3">待发货</view>
			<view v-if="detail.status==4">待收货</view>
			<view v-if="detail.status==5">已完成</view>
			<view v-if="detail.status==6">取消订单</view>
			<view v-if="detail.status==7">拒绝收货</view>
		</view>
		<view class="address">
			<view class="msg"><text>{{detail.addres.username}}</text>{{detail.addres.mobile}}</view>
			<view class="flex_align">
				<view class="tags" v-if="detail.is_default==1">默认</view>
				<view class="site">{{detail.addres.province}}{{detail.addres.city}}{{detail.addres.area}}{{detail.addres.address}}</view>
			</view>
		</view>
		<view class="goods">
			<view class="flex_bet_align">
				<view class="shopName">平台积分商城</view>
				<view class="status" v-if="detail.status==3">待发货</view>
				<view class="status" v-if="detail.status==4">待收货</view>
				<view class="status" v-if="detail.status==5">已完成</view>
				<view class="status" v-if="detail.status==6">取消订单</view>
				<view class="status" v-if="detail.status==7">拒绝收货</view>
			</view>
			<view class="flex_align">
				<image class="goodsImg" :src="detail.image"></image>
				<view style="flex:1;">
					<view class="goodsName">{{detail.title}}</view>
					<view class="price">{{detail.spec_integral}}积分</view>
					<view class="flex_bet">
						<view class="sku" v-if="detail.spec_name">{{detail.spec_name}}</view>
					</view>
				</view>
			</view>
			<view class="item flex_align center" v-if="detail.status==4" @click="logistics">
				<view class="contact">查看物流</view>
			</view>
		</view>
		<view class="order">
			<view class="item flex_bet_align">
				<view class="name">订单编号</view>
				<view style="flex:1;" class="clamp1">{{detail.order_sn}}</view>
				<view class="copy" @click="$plug.copyText(detail.order_sn)">复制</view>
			</view>
			<view class="item flex_align">
				<view class="name">创建时间</view>
				<view>{{detail.createtime}}</view>
			</view>
			<view class="item flex_align" v-if="detail.status==4">
				<view class="name">发货时间</view>
				<view>{{detail.deliverytime}}</view>
			</view>
			<view class="item flex_align" v-if="detail.status==5">
				<view class="name">收货时间</view>
				<view>{{detail.takeovertime}}</view>
			</view>
		</view>
		<view class="foot flex_bet_align">
			<view class="flex">
				<view class="count">共{{detail.number}}件</view>
				<view class="total">总计：<text>{{detail.consume_integral}}</text>积分</view>
			</view>
			<view class="btn" v-if="detail.status==3" @click="operate">提醒发货</view>
			<view class="btn" v-if="detail.status==4" @click="delivery">确认收货</view>
			<view class="btn" v-if="detail.status==5" @click="deletes">删除订单</view>
		</view>
	</view>
</template>

<script>
	var _this,shak;
	export default {
		data() {
			return {
				detail:{
					addres:{
						"id":"",
						"username":"",
						"mobile":"",
						"province":"",
						"city":"",
						"area":"",
						"address":"",
						"is_default":"",
					},
					takeovertime:""
				},
			}
		},
		onLoad(options) {
			_this = this
			_this.id=options.id
			_this.getdata()
		},
		
		methods: {
			// 获取数据
			getdata() {
				_this.$api.get("integraldetail", {detail_id:_this.id}).then(data => {
					console.log(data)
					_this.detail = data
				});
			},
			
			operate(){
				_this.click_shake(()=>{
					_this.$api.get("remind", {
						order_id:_this.id,
					}).then(data => {
						uni.showToast({
							title:"操作成功"
						})
						_this.getdata()
					});
				})
			},
			delivery(){
				uni.showModal({
					content: '确认收到商品？',
					success: function(res) {
						if (res.confirm) {
							_this.$api.post("integralordsave", {
								detail_id:_this.id,
								status:5
							}).then(data => {
								uni.showToast({
									title:"操作成功"
								})
								_this.getdata()
								_this.$plug.isonshow(2)
							});
						}
					}
				});
			},
			deletes(){
				uni.showModal({
					content: '确认删除订单？',
					success: function(res) {
						if (res.confirm) {
							_this.$api.get("delintegralorder", {
								detail_id:_this.id,
							}).then(data => {
								uni.showToast({
									title:"操作成功"
								})
								_this.$plug.isonshow(2)
								wx.navigateBack({delta: 1})
							});
						}
					}
				});
			},
			// 防抖点击
			click_shake(fn){
				if(!_this.shake){
					fn && typeof fn === 'function' && fn()
					_this.shake=true
					setTimeout(function(){
						_this.shake=false
					},500)
				}
			},
			// 查看物流
			logistics(){
				uni.navigateTo({
					url:"/personal/exchangeLogistics?id="+_this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		font-family: PingFang SC;
		background-color: #F7F7F7;
	}
	.top{
		width: 750rpx;
		height: 138rpx;
		background: linear-gradient(90deg,#33bc90, #07adb8);
		font-size: 36rpx;
		font-weight: 700;
		line-height: 138rpx;
		color: #ffffff;
		justify-content: center;
		view{
			margin-left:12rpx;
		}
	}
	.address{
		width: 750rpx;
		height: 170rpx;
		padding:42rpx 30rpx 0;
		background: #ffffff;
		margin-bottom: 20rpx;
		.msg{
			font-size: 28rpx;
			font-weight: 700;
			color: #333333;
			margin-bottom: 18rpx;
			text{
				margin-right:30rpx;
			}
		}
		.tags{
			width: 70rpx;
			height: 36rpx;
			background: #38be8c;
			border-radius: 18rpx;
			font-size: 18rpx;
			text-align: center;
			line-height: 36rpx;
			color: #ffffff;
			margin-right: 10rpx;
		}
		.site{
			font-size: 24rpx;
			color: #666666;
		}
	}
	.goods{
		background-color: #FFFFFF;
		padding:24rpx 30rpx 0;
		margin-bottom: 20rpx;
		.shopName{
			font-size: 28rpx;
			color: #333333;
		}
		.status{
			font-size: 28rpx;
			color: #999999;
		}
		.goodsImg{
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx;
			background-color: #EEEEEE;
			margin:28rpx 22rpx 38rpx 0;
		}
		.goodsName{
			font-size: 28rpx;
			color: #333333;
		}
		.price{
			font-size: 28rpx;
			font-weight: 700;
			color: #f73f3f;
			margin:8rpx 0 14rpx;
		}
		.sku{
			font-size: 24rpx;
			color: #999999;
		}
		.stepper{
			width: 200rpx;
			height: 56rpx;
			background: #ffffff;
			border: 2rpx solid #ececec;
			border-radius: 30rpx;
			line-height: 56rpx;
			text-align: center;
			.reduce{
				width: 63rpx;
			}
			.value{
				width: 70rpx;
				border-left:1rpx solid #ececec;
				border-right:1rpx solid #ececec;
			}
			.add{
				width: 63rpx;
			}
		}
		.item{
			height: 110rpx;
			line-height: 110rpx;
			border-top:1rpx solid #EEEEEE;
			.contact{
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
				margin-left:16rpx;
			}
		}
		.center{
			justify-content: center;
		}
	}
	.order{
		width: 750rpx;
		height: 276rpx;
		padding:0 30rpx;
		background: #ffffff;
		.item{
			height: 92rpx;
			line-height: 92rpx;
			font-size: 28rpx;
			color: #999999;
			.name{
				width: 202rpx;
				font-size: 28rpx;
				color: #333333;
			}
			.copy{
				width: 80rpx;
				height: 42rpx;
				background: #e6e6e6;
				border-radius: 22rpx;
				font-size: 24rpx;
				font-weight: 500;
				text-align: center;
				color: #999999;
				line-height: 42rpx;
			}
		}
	}
	.foot{
		width: 750rpx;
		height: 110rpx;
		background: #ffffff;
		line-height: 110rpx;
		padding:0 30rpx;
		position: fixed;
		bottom: 0;
		left:0;
		.count{
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
			margin-right: 24rpx;
		}
		.total{
			font-size: 24rpx;
			font-weight: 500;
			color: #333333;
			text{
				color:#F73F3F;
			}
		}
		.btn{
			width: 152rpx;
			height: 70rpx;
			background: linear-gradient(90deg,#38be8c, #06adba 96%);
			border-radius: 36rpx;
			font-size: 26rpx;
			text-align: center;
			line-height: 70rpx;
			color: #ffffff;
		}
	}
</style>
